<template>
	<view class="main">
		<ul class="list">
			<li v-for="(item, index) in list" :key="index">
				<view class="info">
					<!-- <view class="avatar">
						<image src="@/static/img/ceshi.jpg" mode=""></image>
					</view> -->
					<view class="msg">
						<view class="tit">{{ item.realname }} {{ item.mobile }}</view>
						<view class="txt">
							{{ item.province }} {{ item.city == item.province ? '' : item.city }} {{ item.district == item.province ? '' : item.district }} {{ item.address }}
						</view>
					</view>
					<view class="img" @tap.stop="routerTo(`/pages/pageB/address/newAdd?id=${item.id}`)">
						<image src="@/static/img/icon.png" mode=""></image>
					</view>
				</view>
				<view class="fn">
					<view class="moren" @tap="selemoren(item)">
						<image v-if="item.status == 1" src="@/static/img/Group.png" mode=""></image>
						<image v-else src="@/static/img/noGroup.png" mode=""></image>
						默认地址
					</view>
					<view class="del" @tap="del(item.id)">删除</view>
				</view>
			</li>
		</ul>
		<view class="bottom" @tap="routerTo('/pages/pageB/address/newAdd')">
			<view class="btn">添加地址</view>
		</view>
	</view>
</template>

<script>
import { Transport, address, deleteAdd } from '@/api/user.js';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {},
	onShow() {
		this.getList();
	},
	methods: {
		async del(id) {
			let res = await deleteAdd({
				id: id
			});
			if (res.code == 1) {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				});
				this.getList();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		},
		async selemoren(item) {
			if (item.status != 1) {
				let res = await address({
					mobile: item.mobile,
					area: item.area,
					address: item.address,
					realname: item.realname,
					status: 1,
					id: item.id
				});
				if (res.code == 1) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					this.getList();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}
		},
		async getList() {
			let res = await Transport();
			this.list = res.data;
		},
		routerTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: calc(100vh - 44px);
	background-color: #f8f9fc;
	padding: 15px;
	padding-bottom: 80px;

	.list {
		li {
			padding: 15px 12px 10px;
			background-color: #fff;
			border-radius: 5px;
			margin-bottom: 10px;

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 12px;
				border-bottom: 1px solid #e8e8e8;
				margin-bottom: 10px;

				.avatar {
					image {
						width: 42px;
						height: 42px;
						border-radius: 1000px;
					}
				}

				.msg {
					margin: 0 20px 0 10px;

					.tit {
						font-size: 14px;
						color: #232323;
						margin-bottom: 5px;
					}

					.txt {
						font-size: 12px;
						color: #666666;
					}
				}

				.img {
					image {
						width: 13px;
						height: 13px;
					}
				}
			}

			.fn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.moren {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #666666;

					image {
						width: 14px;
						height: 14px;
						margin-right: 7px;
					}
				}

				.del {
					font-size: 14px;
					color: #3d3d3d;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 15px;
		left: 0;
		width: 100%;
		padding: 0 15px;

		.btn {
			width: 100%;
			padding: 12px 0;
			text-align: center;
			color: #fff;
			background-color: #0a84ff;
			border-radius: 100px;
		}
	}
}
</style>
